<template>
    <!--查询首页-->
  <div class="parent">
    <div class="index">
      <el-col :span="10" :offset="7">
      <div style="margin-top: 15px;">
        <el-input placeholder="请输入想看的书名"v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="submit()"></el-button>
        </el-input>
      </div>
      </el-col>
    <!--<el-row>-->
      <!--<el-col :span="16" :offset="3">-->
      <!--<el-input v-model="search" placeholder="请输入想看的书名" />-->
      <!--</el-col>-->
      <!--<el-col :span="2" >-->
        <!--<el-button type="primary" icon="el-icon-search" circle   @click="submit()"/>-->
      <!--</el-col>-->
    <!--</el-row>-->
    {{msg}}
    </div>
  </div>
</template>

<script>
    export default {
      name: "index",
      data(){
          return{
            search: '大主宰',
            msg: null
          }
      },
      methods:{
        submit(){
          if(this.search==null){
            this.msg='请输入书名'
            this.search= null
          }else{
            this.$fetch("q",{'fictionName':this.search}).then(data=>{
              console.log(JSON.stringify(data));
              this.$router.push({
                path: '/menu',
                query: {
                  menus: {
                    name: data.fictionName,
                    list: data.fictionPages
                  }
                }
              })
            })
          }
        }
      }
    }
</script>

<style  scoped>
  .index{
    width: 100%;
    height: 10vh;
    position:absolute;
    top:48%;
    -webkit-transform:translateY(-48%);
    transform:translateY(-48%);
  }
</style>
